﻿---
layout : layout
title : markgroves
---
<div class="container">
<div class="two columns">
<h4>test</h4>
	<ul id="filters">
		<li><a href="#" data-filter="*" class="selected">all ({{site.categories.photograph | size}})</a></li>
		<li class="title">general</li>
		<li><a href="#" data-filter=".b_w">b&w</a></li>
		<li class="title">subject</li>
		<li><a href="#" data-filter=".landscape">landscape</a></li>
		<li><a href="#" data-filter=".street">street</a></li>
		<li><a href="#" data-filter=".portrait">portrait</a></li>
		<li><a href="#" data-filter=".macro">macro</a></li>
	</ul>
</div>
<div class="fourteen columns isotope" id="photo_grid">

   	{% for post in site.categories.photograph %}
		{% if post.photograph_max_width < post.photograph_max_height %}
		{%		assign portrait = 'port' %}
		{%		assign thumb = 'portrait_thumb' %}
		{% else %}
		{%		assign portrait = '' %}
		{%		assign thumb = 'normal_thumb' %}
		{% endif %}
			<div class="photo_thumb {{portrait}} isotope-item {{post.subject}} {{post.attribute}}">
				<a href="{{post.url}}">
					<img src="img/blank.gif" class="clear_thumb"/>
				</a>
				<div class="{{thumb}}" style="background-image: url({{site.thumbpath}}{{post.photograph}}); visibility: visible; zoom: 1; opacity: 0.85;"></div>
				<div class="thumb_details">
					<h6	class="thumb_title">{{post.title}}</h6>
					<div class="thumb_description">
						<div class="thumb_details_date">{{post.date | date: "%B %d, %Y"}}</div>
						<div class="thumb_details_comments">
						{% if post.comments %}<a href="{{site.url}}{{post.url}}#disqus_thread">comments</a>{% endif %} 
						</div>
						<script>
							
						</script>
					</div>
				</div>
			</div>
	{% endfor %}


</div>
</div>
<p>
	
    <script type="text/javascript">
	//<![CDATA[
		/* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
		var disqus_shortname = 'markgrovesphotography'; // required: replace example with your forum shortname
		var disqus_developer = 1; // developer mode is on
		(function () {
			/* * * DON'T EDIT BELOW THIS LINE * * */
			var s = document.createElement('script'); s.async = true;
			s.type = 'text/javascript';
			s.src = 'http://' + disqus_shortname + '.disqus.com/count.js';
			(document.getElementsByTagName('HEAD')[0] || document.getElementsByTagName('BODY')[0]).appendChild(s);
		}());

        $container = $('#photo_grid');
        $(window).load(function () {
            $container.isotope({
                itemSelector: '.photo_thumb',
                masonry: {
                    columnWidth: 12
                }
            });


        });

        //filter items when filter link is clicked
        $('#filters a').click(function () {
            var selector = $(this).attr('data-filter');
            $container.isotope({ filter: selector });
            return false;
        });


        var $optionSets = $('#filters'),
          $optionLinks = $optionSets.find('a');

        $optionLinks.click(function () {
            var $this = $(this);
            // don't proceed if already selected
            if ($this.hasClass('selected')) {
                return false;
            }
            var $optionSet = $this.parents('#filters');
            $optionSet.find('.selected').removeClass('selected');
            $this.addClass('selected');

            // make option object dynamically, i.e. { filter: '.my-filter-class' }
            var options = {},
            key = $optionSet.attr('data-option-key'),
            value = $this.attr('data-option-value');
            // parse 'false' as false boolean
            value = value === 'false' ? false : value;
            options[key] = value;
            if (key === 'layoutMode' && typeof changeLayoutMode === 'function') {
                // changes in layout modes need extra logic
                changeLayoutMode($this, options)
            } else {
                // otherwise, apply new options
                $container.isotope(options);
            }

            return false;
        });


		//]]>

    </script>

	</p>

